<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amCharts examples</title> 
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="../../amcharts/javascript/amcharts.js" type="text/javascript"></script>
        <script src="../../amcharts/javascript/raphael.js" type="text/javascript"></script>        
        
        <script type="text/javascript">
        
        var chart;
        
        var chartData = [{country:"USA", year2004:3.5, year2005:4.2},
                        {country:"UK", year2004:1.7, year2005:3.1},
                        {country:"Canada", year2004:2.8, year2005:2.9},
                        {country:"Japan", year2004:2.6, year2005:2.3},
                        {country:"France", year2004:1.4, year2005:2.1},
                        {country:"Brazil", year2004:2.6, year2005:4.9},
                        {country:"Russia", year2004:6.4, year2005:7.2},
                        {country:"India", year2004:8.0, year2005:7.1},
                        {country:"China", year2004:9.9, year2005:10.1}];
        
        
        window.onload = function() 
        {
            chart = new AmCharts.AmSerialChart();
            chart.dataProvider = chartData;
            chart.categoryField = "country";
            chart.color = "#FFFFFF";
            chart.fontSize = 14;
            chart.marginTop = 25;
            chart.marginBottom = 40;
            chart.marginRight = 60;
            chart.startDuration = 1;
            chart.angle = 30;
            chart.depth3D = 60;
            chart.plotAreaFillAlphas= 0.1;
            
            var graph1 = new AmCharts.AmGraph();
            graph1.title = "2004";
            graph1.valueField = "year2004";
            graph1.type = "column";
            graph1.lineAlpha = 0;
            graph1.lineColor = "#D2CB00";
            graph1.fillAlphas = 1;
            graph1.balloonText="GDP grow in [[category]] (2004): [[value]]";
            chart.addGraph(graph1);
            
            var graph2 = new AmCharts.AmGraph();
            graph2.title = "2005";
            graph2.valueField = "year2005";
            graph2.type = "column";
            graph2.lineAlpha = 0;
            graph2.lineColor = "#BEDF66";
            graph2.fillAlphas = 1;
            graph2.balloonText="GDP grow in [[category]] (2005): [[value]]";
            chart.addGraph(graph2);
            
            var valAxis = new AmCharts.ValueAxis();
            valAxis.stackType = "3d";
            valAxis.gridAlpha = 0.2;
            valAxis.gridColor = "#FFFFFF";
            valAxis.axisColor = "#FFFFFF";
            valAxis.axisAlpha = 0.5;
            valAxis.dashLength = 5;
            valAxis.unit = "%";
            chart.addValueAxis(valAxis);
            
            var catAxis = chart.categoryAxis;
            catAxis.gridAlpha = 0.2;
            catAxis.gridPosition = "start";
            catAxis.gridColor = "#FFFFFF";
            catAxis.axisColor = "#FFFFFF";
            catAxis.axisAlpha = 0.5;
            catAxis.dashLength = 5;
            catAxis.autoGridCount = true;
            
            chart.write("chartdiv");
        }
        
        </script>
    
    </head>
    
    <body>
        <div id="chartdiv" style="width: 100%; height: 400px; background-color:#000000"></div>
    </body>
</html>

